<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="图片">
        <!-- 如果要在单元格里面显示文字以外的内容，需要使用具名插槽 -->
        <!-- scope对象，里面有row属性 -->
        <template #default="scope">
          <!-- <span>{{ scope.row.img }}</span> -->
          <!-- <img :src="scope.row.img" alt="" /> -->
          <el-image
            style="width: 150px; height: 150px"
            :src="scope.row.img"
            :zoom-rate="1.2"
            :preview-src-list="[scope.row.img]"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" />
      <el-table-column prop="alt" label="提示" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-popconfirm
            title="你确定要删除吗?"
            @confirm="confirmEvent(scope.row.bannerid)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import axios from "axios";
import request from "../../../utils/request";
import { bannerListApi, bannerRemoveApi } from "@/api/index.js";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await bannerListApi();
      this.tableData = res?.data;

      // const res = await request.get("/admin/banner/list");
      // this.tableData = res.data;

      // request.get().then((res) => {
      //   console.log(res);
      // });

      // axios
      //   .get("http://121.89.205.189:3000/admin/banner/list", {
      //     params: {},
      //     headers: { token: localStorage.getItem("token") },
      //   })
      //   .then((res) => {
      //     // console.log(res);
      //     if (res.data.code === "200") {
      //       this.tableData = res.data.data;
      //     } else if (res.data.code === "10119") {
      //       ElMessage({
      //         message: res.data.message,
      //         type: "error",
      //       });
      //       localStorage.clear();
      //       this.$router.push("/login");
      //     } else {
      //       ElMessage({
      //         message: res.data.message,
      //         type: "error",
      //       });
      //     }
      //   });
    },
    async confirmEvent(id) {
      await bannerRemoveApi({ bannerid: id });
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      this.getData();

      // console.log("确认", id);
      // axios
      //   .get("http://121.89.205.189:3000/admin/banner/delete", {
      //     headers: { token: localStorage.getItem("token") },
      //     params: {
      //       bannerid: id,
      //     },
      //   })
      //   .then((res) => {
      //     if (res.data.code === "200") {
      //       ElMessage({
      //         message: "删除成功",
      //         type: "success",
      //       });
      //       // 如果成功了，再一次请求数据
      //       // 数据是新的，页面自动更新
      //       this.getData();
      //     } else if (res.data.code === "10119") {
      //       ElMessage({
      //         message: res.data.message,
      //         type: "error",
      //       });
      //       localStorage.clear();
      //       this.$router.push("/login");
      //     } else {
      //       ElMessage({
      //         message: res.data.message,
      //         type: "error",
      //       });
      //     }
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
    },
  },
};
</script>

<style></style>
